<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>选择配送员</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/chooseserviceuser.css?v=1" />
    <style>
        .tip-remark{
            color: #999;
            background-color: #f6fbff;
            border-radius: 4px;   
            font-size: 12px;
            padding: 4px 8px;
        }
        .flex-zy{
            display: flex;
            justify-content: space-between;
            line-height: 2;
        }
        .aui-list .aui-list-item{
            padding-left: 0;
        }
        .aui-list .aui-list-item:first-child,.aui-list .aui-list-item:last-child{
            border-bottom: 0;
        }
        .new-label-cx{
            padding: 2px 5px;
            border-radius: 10px;
            background: #EBF4FD;
            color: #4094EE;
            top: -1px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <section class="aui-content contentBox">    
            <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
            </div>

            <div class="aui_list boxarea mb20">
                <div class="aui-list-item">
                    <div class="aui-list-item-inner flex-zy">
                        <div class="aui-list-item-title text-grey aui-font-size-16" style="min-width: 120px;">配送地址： </div>
                        <div class="aui-list-item-right aui-font-size-16" style="text-align: right;">
                            {{form.ToAddress?form.ToAddress:'--'}}
                        </div>
                    </div>
                </div>
                <div class="aui-list-item">
                    <div class="aui-list-item-inner flex-zy">
                        <div class="aui-list-item-title text-grey aui-font-size-16" style="min-width: 120px;">预约送达时间： </div>
                        <div class="aui-list-item-right aui-font-size-16"  style="text-align: right;">
                            {{form.AppointStartTime}}-{{form.AppointEndTime?form.AppointEndTime:'-'}}
                        </div>
                    </div>
                </div>
            </div>
            <!--人员选择-->
            <div v-if="list.length>0"  class="aui_list boxarea mb20">
                <div class="">
                    <div class="aui-list">
                        <div class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title">请选择社区配送员 </div>
                                <div class="aui-list-item-right" v-on:click="doAllChoosUser()">
                                    <input type="checkbox" class="aui-checkbox  new-right-list" v-bind:checked="isopen">
                                </div>
                            </div>
                        </div>
                        <div class="tip-remark">说明：选择多人时，每个配送员都可以进行接单操作。</div>
                        <div >
                            <div v-for="(item2,index2) in list" class="aui-list-item" style="display: block;" v-on:click="doChoosUser(item2)">
                                <div class="aui-media-list-item-inner ptb " v-bind:class="{'border-bottomLine':index2<list.length-1}">
                                    <div class="aui-list-item-media">
                                        <div class="photo-content">
                                            <div>
                                                <img v-if="item2.HeadImg==''||item2.HeadImg==undefined||item2.HeadImg=='undefined'" class="photo-bg" src="../image/news_li_img.png">
                                                <img v-if="item2.HeadImg!=''&&item2.HeadImg!=undefined&&item2.HeadImg!='undefined'" class="photo-bg" :src="item2.HeadImg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10" style="display: block;">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title pr20">
                                                <ul class="aui-list-view aui-thumb-view">
                                                    <li class="aui-list-view-cell aui-img aui-col-xs-6 new-col-xs4">
                                                        <div>{{item2.Name}} <span v-if="index2<3" class="aui-label new-label-cx">常选</span></div>
                                                        <div class="aui-ellipsis-2 aui-margin-t-0 text-grey">{{item2.PositionNames==''?'无':item2.PositionNames}}</div>
                                                    </li>
                                                    <li class="aui-list-view-cell aui-img aui-col-xs-3 new-col-xs4 ccc">
                                                        <div><span class="text-black">{{item2.WaitSend}}</span></div>
                                                        <div class="aui-margin-t-0">待接单</div>
                                                    </li>
                                                    <li class="aui-list-view-cell aui-img aui-col-xs-3 new-col-xs4 ccc">
                                                        <div><span class="text-black">{{item2.CycleSend}}</span></div>
                                                        <div class="aui-margin-t-0">处理中</div>
                                                    </li>
                                                </ul>
                                            </div>
                                        
                                            <div class="aui-list-item-right">
                                                <input type="checkbox" class="aui-checkbox  new-right-list" v-bind:checked="item2.isselected">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10" style="display: block;">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title pr20">
                                                <ul class="aui-list-view aui-thumb-view">
                                                    <li class="aui-list-view-cell aui-img aui-col-xs-4 new-col-xs4">
                                                        {{item2.realName}} <span v-if="index2<3" class="aui-label new-label-cx">常选</span>
                                                    </li>
                                                    <li class="aui-list-view-cell aui-img aui-col-xs-4 new-col-xs4 ccc">
                                                        待接单 <span class="text-blue">{{item2.stayNumber}}</span>
                                                    </li>
                                                    <li class="aui-list-view-cell aui-img aui-col-xs-4 new-col-xs4 ccc">
                                                        处理中 <span>{{item2.chuliNumber}}</span>
                                                    </li>

                                                </ul>
                                            </div>
                                            <div class="aui-list-item-right">
                                                <input type="checkbox" class="aui-checkbox  new-right-list" v-bind:checked="item2.isselected">
                                            </div>

                                        </div>
                                        <div class="aui-list-item-text">
                                            <div class="aui-ellipsis-2">{{item2.titleName==''?'无':item2.titleName}}</div>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!--底部弹出-->
        <div v-if="showchoose" class="choose-list">
            <div class="choose-header border-bottomLine">
                已选：{{chooseList.length}} 人
                <label class="header-close">
                    <i v-on:click="showChooseAll()" class="icon iconfont icon-shoulishibaiicon fr"></i>
                </label>

            </div>

            <div v-if="chooseList.length>0" class="aui-content aui-margin-b-15 pt50 aui-padded-l-10">
                <ul class="aui-list aui-media-list">
                    <li v-for="(item,index) in chooseList" class="aui-list-item" v-bind:class="{'border-bottomLine':index<chooseList.length-1}">
                        <div class="aui-media-list-item-inner ptb">
                            <div class="aui-list-item-media ">
                                <div class="photo-content">
                                    <div>
                                        <img v-if="item.headImg==''||item.headImg==undefined||item.headImg=='undefined'" class="photo-bg" src="../image/news_li_img.png">
                                        <img v-if="item.headImg!=''&&item.headImg!=undefined&&item.headImg!='undefined'" class="photo-bg" :src="item.headImg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <ul class="aui-list-view aui-thumb-view">
                                            <li class="aui-list-view-cell aui-img aui-col-xs-4 new-col-xs4">
                                                {{item.Name}}
                                            </li>
                                            
                                        </ul>
                                    </div>
                                    <div v-on:click="doChoosUser(item)" class="aui-list-item-right">
                                        <label class="btn-del-show text-blue"> <i class="icon iconfont icon-shanchu "></i> 移除</label>
                                    </div>
                                </div>
                                <div class="aui-list-item-text text-grey">
                                    {{item.PositionNames==''?'无':item.PositionNames}}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>


        <!--底部按钮-->
        <div class="aui_bottom">
            <div v-on:click="showChooseAll()" class="left-btn">
                已选：{{chooseList.length}} 人
                <i v-if="showchoose" class="icon iconfont icon-shangjiantou"></i>
                <i v-if="!showchoose" class="icon iconfont icon-down"></i>
            </div>
            <div v-on:click="do_save()" class="right-btn">派单</div>
        </div>

    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-collapse.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript" src="js/choosedeliveryuser.js"></script>

</html>
